<template>
	<div class="zk-auto-form" v-if="autoForm&&async" v-loading="isLoading">
		<div v-if="serviceConfig.fromMessage==null">
			<el-alert v-if="autoForm.tooltip && autoForm.tooltip.alertText" :title="autoForm.tooltip.alertText" show-icon type="success" :closable="false"></el-alert>
			<el-form ref="generateForm" :model="viewModel" :rules="autoForm.rules">
				<div v-if="autoForm.type==='tab'">
					<el-tabs v-model="tabActiveName">
						<el-tab-pane v-for="(column,index) in autoForm.columns" :key="index">
							<span slot="label"><i :class="column.icon"></i> {{column.name}}</span>
							<form-item @formItemChangeValue="formItemChangeValue" v-for="(tabColumn,tabIndex) in column.columns" :key="tabIndex" v-model="viewModel[tabColumn.field]" :column="tabColumn" :currentModel="viewModel" v-show="tabColumn.show===true"></form-item>
						</el-tab-pane>
					</el-tabs>
				</div>
				<div v-else>
					<form-item @formItemChangeValue="formItemChangeValue" v-for="(column,index) in autoForm.columns" :key="index" v-model="viewModel[column.field]" :column="column" :currentModel="viewModel" v-show="column.show===true"> </form-item>
				</div>
			</el-form>
			<div class="auto-btn-box" v-if="showBottonFool">
				<div class="btn">
					<x-button type="primary" :isLoading="loading" btnText="保存" @change="saveForm()"></x-button>
				</div>
			</div>
			<template v-if="autoForm.tooltip&&autoForm.tooltip.buttomHelpText&&autoForm.tooltip.buttomHelpText.length > 0">
				<x-line :border="true" icon="flaticon-exclamation" title="操作说明"></x-line>
				<ul class="zkAutoFormUl">
					<li class="zkAutoFormList" v-for="(item, index) in autoForm.tooltip.buttomHelpText" :key="index">
						{{index+1}}、<span v-html="item"></span>
					</li>
				</ul>
			</template>
		</div>
		<div v-else>
			<div class="operate-susscs">
				<div class="operate-susscs_icon">
					<i class="el-icon-check"></i>
				</div>
				<div class="susscs-text">{{serviceConfig.fromMessage.message}}</div>
			</div>
		</div>
		<el-dialog title="支付密码验证" :visible.sync="dialogVisible" width="40%">
			<div class="payment-cot">
				<el-form class="payment-cot-form">
					<el-form-item label="支付密码" :required="true">
						<el-input type="password" v-model="payModel"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="payment-cot-footer">
					<el-button @click="dialogVisible = false" class="footer_cancel">取 消</el-button>
					<el-button type="primary" @click="paymentSave" :loading="payLoading">确定</el-button>
				</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import formItem from './form-item'
	import convert from './convert'
	import service from './service'

	import ala from 'ala'
	export default {
		name: 'zk-auto-form',
		components: {
			formItem
		},
		props: {
			notConvert: {
				default: false
			},
			showBotton: {
				default: true
			},
			serviceConfig: {},
			dataModel: {},
			widget: {},
			afterSave: {
				type: Boolean,
				default: false
			}, // 判断父组件中是否定义保存后执行单独的方法，如果设置为true，在需要定义afterSave事件  
			// 示范用法：<zk-auto-form type="RecommendAddUser" @afterSave="afterSave" :afterSave="true"></zk-auto-form>
			type: {} // 如果type不为空的时候，表单从服务器上动态获取
		},
		data() {
			return {
				viewModel: {},
				autoForm: null,
				tabActiveName: 0,
				loading: false,
				async: false,
				isLoading: true,
				showBottonFool: true,
				dialogVisible: false,
				payLoading: false,
				payModel: ''
			}
		},
		mounted() {
			this.init()
			this.$nextTick(() => {
				this.$on('form_change_widget_data', (widgetData) => {
					this.init(widgetData)
				})
			})
		},
		methods: {
			async init(newWidget) {
				var configData = this.serviceConfig
				if (newWidget) {
					configData = newWidget
				}
				if (!configData) {
					return
				}

				if (this.notConvert === true) {
					this.autoForm = configData
				} else {
					this.autoForm = await convert.toConfig(configData)
				}
				this.viewModel = service.getModel(this.autoForm, this.dataModel)
				this.showBottonFool = this.showBotton
				if (this.autoForm.hiddenButton === false) {
					this.showBottonFool = false
				}
				this.async = true
				this.$emit('formLoad', this.async)
				this.isLoading = false
			},
			async paymentSave() {
				var this_ = this
				this.payLoading = true
				var para = {
					payPassWord: this.payModel,
					userId: this.$ala.userId()
				}

				var payRespones = await this.$ala.httpPost('Api/User/ConfirmPayPassword', para)
				if (payRespones) {
					this.$emit('saveForm', this.viewModel)
					this.dialogVisible = false
				}
				setTimeout(() => {
					this_.payLoading = false
				}, 500)
			},
			//快排
			async saveForm() {
				this.loading = true
				if (this.autoForm.checkSafePassword) {
					this.dialogVisible = true
				} else {
					this.$emit('saveForm', this.viewModel)
				}
				var this_ = this
				setTimeout(() => {
					this_.loading = false
				}, 500)
			},
			// 保存转态，通过外部事件条调用
			setSaveStatus() {
				this.loading = false
			},
			// 控件内容修改时事件
			formItemChangeValue(column, value) {
				// 条件判断
				if (column.conditional) {
					this.autoForm.columns.forEach((r, index) => {
						if (r.columns) {
							var tosVlaue
							r.columns.forEach(g => {
								if (g.ifField && column.field.toUpperCase() === g.ifField.toUpperCase()) {
									tosVlaue = column.field + '=' + value
									g.show = false
									g.ifValue.forEach(bv => {
										if (bv.toUpperCase() === tosVlaue.toUpperCase()) {
											g.show = true
										}
									})
								}
							})
						} else {
							if (r.ifField && column.field.toUpperCase() === r.ifField.toUpperCase()) {
								tosVlaue = column.field + '=' + value
								r.show = false
								r.ifValue.forEach(bv => {
									if (bv.toUpperCase() === tosVlaue.toUpperCase()) {
										r.show = true
									}
								})
							}
						}
					})
					this.$forceUpdate()
				}
			}
		},
		watch: {
			value: {
				deep: true,
				handler(val) {
					this.viewModel = {
						...this.viewModel,
						...val
					}
				}
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss">
	@import "./style.scss";
	@import "./autoform.scss";
</style>